<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="Top_tilte">
				银行卡管理
				<view class="NavAddBank" @tap.stop.prevent="NavRouter()">
					添加银行卡
				</view>
			</view>
			<view class="BankList" v-for="(item,index) in bankList" :key="index" :style="{'background-color':item.cover}">
				<view class="item" @tap.stop.prevent="NavData(item)" >
					<view class="TopData">
						<view class="icon">
							<image :src="item.logo" mode=""></image>
						</view>
						<view class="Text">
							{{item.linked_brbankname}}
						</view>
					</view>
					<view class="ConetetData">
						<view class="circularAggregate" v-for="(item) in 3" :key='item'>
							<view class="circular" v-for="(item) in 4" :key='item'></view>
						</view>
						<view class="BankPhone">
							{{item.linked_acctno_pass}}
						</view>
					</view>
					<!-- <view class="Tips">
						单笔限额1万 单日限额1万
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				bankList:[],//
				
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getBankList()
		},
		onPullDownRefresh() {
				this.getBankList()
		},
		methods: {
			NavRouter() {
				uni.redirectTo({
					url: `./addbank`
				});
			},
			/**
			 * vuex
			 * 存储
			 */
			NavData(e){
				console.log(e)
				this.$store.commit('get_user_bankPhone',e.linked_phone)
				this.$store.commit('get_user_bank',e.linked_acctno)
				this.$store.commit('get_user_bankName',e.linked_brbankname)
				this.$store.commit('get_user_PassBank',e.linked_acctno_pass2)
				uni.redirectTo({
					url: `./bankData`
				});
			},
			/**
			 * 请求银行卡列表
			 */
			getBankList(){
			    let that = this;
				let is_lianlian = uni.getStorageSync('isOpenStatus').is_open_lianlian
				if(!is_lianlian) return
			    app._post_form('User/myAcctlist', {}, function (result) {
			        that.setData(result.data);
					that.bankList = result.data
					that.bankList.forEach((item)=>{
						item.cover = that.getRandomColor()
					})
					that.$store.commit('get_user_bankIndex',that.bankList.length)
					console.log(that.bankList)
					uni.stopPullDownRefresh();
			    });
			},
			getRandomColor(){
			      return  '#'+Math.random().toString(16).slice(2,8)
			}
			
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
	}

	.Top_tilte {
		margin-top: 40rpx;
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		text-align: center;
		color: rgba(0, 0, 0, 0.9);
		font-size: 30rpx;
		font-family: 'dy-iconfont';
		font-weight: bold;
		line-height: 80rpx;
		position: relative;

		.NavAddBank {
			position: absolute;
			top: 0rpx;
			right: 45rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #1050FF;
		}
	}

	.BankList {
		// background-image: url(@/static/bank/ABC.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: rgba(255, 255, 255, 0.9);
		margin: 0 30rpx;
		margin-top: 50rpx;
		border-radius: 20rpx;
		background-color: #000;
		box-shadow: 0rpx 4rpx 6rpx 1rpx rgba(0, 0, 0, 0.02);
		padding: 40rpx 60rpx;

		.item {
			height: 180rpx;
			// background-color: #000;

			.TopData {
				display: flex;
				align-items: center;
				font-size: 34rpx;

				.icon {
					margin-right: 40rpx;
					width: 72rpx;
					height: 72rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.ConetetData {
				margin-top: 50rpx;
				display: flex;
				align-items: center;

				.circularAggregate {
					display: flex;
					margin-right: 36rpx;

					.circular {
						width: 15rpx;
						height: 15rpx;
						border-radius: 50%;
						background-color: #FFF;
						margin-right: 18rpx;
					}
				}

				.BankPhone {
					font-size: 32rpx;
					letter-spacing: 4rpx;
				}

			}

			.Tips {
				margin-top: 50rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.6);
			}

		}


	}
</style>
